<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人资料</title>
		<style type="text/css">
			body{
				height: 2000px;
			}
			*{
				margin: 10px;
				font-size: 26px;
			}
			.input{
				width: 500px;
			}
		</style>
	</head>
	<body>
		<div id="">
			<form action="" method="post" enctype="multipart/form-data">
				<table border="0" cellspacing="0" cellpadding="1">
					<tr>
						<td>姓名</td>
					</tr>
					<tr>
						<td><input type="text" style="width: 500px;"/></td>
					</tr>
					<tr>
						<td>特长</td>
					</tr>
					<tr>
						<td>
							<select name="" style="width: 500px;height: 50px;">
								<option value=""></option>
								<option value="java">java</option>
								<option value="C">C</option>
								<option value="C++">C++</option>
								<option value="Python">Python</option>
								<option value="javascript">javascript</option>
								<option value="HTML">HTML</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>性别</td>
					</tr>
					<tr>
						<td><input type="radio" value="true" style="width: 30px;height: 30px;">男
							<input type="radio" value="false" style="width: 30px;height: 30px;">女
						</td>
					</tr>
					<tr>
						<td>公司</td>
					</tr>
					<tr>
						<td><input type="text" placeholder="公司名称" style=""/></td>
					</tr>
					<tr>
						<td>职务</td>
					</tr>
					<tr>
						<td><input class="input" type="text" placeholder="职务"/></td>
					</tr>
					<tr>
						<td>微信</td>
					</tr>
					<tr>
						<td><input class="input" type="text" placeholder="微信号"/></td>
					</tr>
					<tr>
						<td>QQ</td>
					</tr>
					<tr>
						<td><input class="input" type="text" placeholder="QQ号码"/></td>
					</tr>
					<tr>
						<td>领英</td>
					</tr>
					<tr>
						<td><input class="input" type="text" placeholder="领英"/></td>
					</tr>
					<tr>
						<td>微博</td>
					</tr>
					<tr>
						<td><input class="input" type="text" placeholder="微博地址"/></td>
					</tr>
					<tr>
						<td>博客</td>
					</tr>
					<tr>
						<td><input class="input" type="text" placeholder="博客地址"/></td>
					</tr>
					<tr>
						<td>所在地</td>
					</tr>
					<tr>
						<td>省份:</td>
					</tr>
					<tr>	
						<td>
							<select name="" id="provinceId" onchange="changeProvince();">
								<option value="-1">请选择省份</option>
							</select>
							<select name="" id="cityId" onchange="changeCity();">
								<option value="-1">请选择城市</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>上传头像</td>
					</tr>
					<tr>
						<td><input type="file" name="file" multiple="multiple"/></td>
					</tr>
					<tr>
						<td>自我介绍</td>
					</tr>
					<tr>
						<td><textarea rows="5" cols="40">
							
							</textarea>
						</td>
					</tr>
					<tr>
						<td><input type="submit" value="更新"/></td>
					</tr>
				</table>
			</form>
		</div>
	</body>
	
	
	<script type="text/javascript">
			var  provinces =['北京市','上海市','福建省','广东省','浙江省'];
			provinces.push('江苏省')
			var citys = [
					['海淀区','朝阳区','丰台区'],
					['浦东区','嘉定区','宝山区'],
					['珠海市','深圳市','佛山市'],
					['福州市','厦门市','泉州市'],
					['杭州市','宁波市','温州市'],
					['南京市','无锡市','苏州市']
			];
			function changeProvince(){
				var provinceObj = document.getElementById('provinceId');
				var cityObj = document.getElementById('cityId');
				cityObj.innerHTML = `<option value="-1">请选择城市</option>`;
				if(provinceObj.value==-1){
					return;
				}
				var city = citys[provinceObj.value];			
				for(var i=0;i<city.length;i++){
					cityObj.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
				}
			}
			function changeCity(){
				var provinceObj = document.getElementById('provinceId');
				var cityObj = document.getElementById('cityId');
				var provinceName = provinces[provinceObj.value];
				var cityName = citys[provinceObj.value][cityObj.value];
			
				var selectObj = document.getElementById('selectValue');
				selectObj.innerText = provinceName+"-->"+cityName;
			}
			onload = function(){
				//添加省份
				var provinceObj = document.getElementById('provinceId');
				for(var i=0;i<provinces.length;i++){
					provinceObj.innerHTML+=`<option value="`+i+`">`+provinces[i]+`</option>`;
				}
				
			}
		</script>
</html>
